<template>
	<view>
		<view class="content">
			<view class="row">
				<view class="nominal">收件人</view>
				<view class="ipt">
					<input type="text" v-model="addressInfo.name" placeholder="请输入收件人姓名"/>
				</view>
			</view>
			<view class="row">
				<view class="nominal">电话号码</view>
				<view class="ipt">
					<input type="text" v-model="addressInfo.phoneNumber" placeholder="请输入收件人电话号码"/>
				</view>
			</view>
			<view class="row">
				<view class="nominal">所在地区</view>
				<view class="ipt" @tap="openAddress">{{addressInfo.province}}-{{addressInfo.city}}-{{addressInfo.region}}</view>
			</view>
			<view class="row">
				<view class="nominal">详细地址</view>
				<view class="ipt">
					<input type="text" v-model="addressInfo.detailAddress" placeholder="请输入详细地址"/>
				</view>
			</view>
			<view class="row">
				<view class="nominal">设置默认地址</view>
				<view class="ipt switch">
					<switch @change="isDefaultAddress" :checked="addressInfo.defaultStatus == 1 ? true : false" color="#354E44" />
				</view>
			</view>
		</view>
		
		<view class="del" @tap="delAddress">删除收货地址</view>
		
		<view class="save">
			<view class="btn" @tap="updateAddress">更新地址</view>
		</view>
		
		<!-- 地址组件 -->
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
		
	</view>
</template>

<script>
	import { findAllAddress , updateAddressInfo , delAddressInfo , makeAddressDefaul } from "../../../../api/home/address/editaddress/editaddress.js";
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	
	export default {
		data() {
			return {
				// 当前点击的用户信息
				addressInfo:{},
				// 组件默认展示地址
				cityPickerValueDefault:[7,0,0],
			};
		},
		components: {
		     simpleAddress
		},
		methods:{
			// 初始化获取地址信息
			init(id){
				findAllAddress().then(res=>{
					// console.log(res);
					var addressList = res.data.items;
				    var index = addressList.findIndex(ele=>ele.id == id);
					this.addressInfo = addressList[index];
					console.log(this.addressInfo);
				})
			},
			// 点击选择地址
			openAddress(){
				this.$refs.simpleAddress.open()
			},
			// 地址组件事件
			onConfirm(e){
				console.log(e);
				this.addressInfo.city = e.labelArr[1];
				this.addressInfo.cityCode = e.provinceCode + e.cityCode + e.areaCode;
				this.addressInfo.province = e.labelArr[0];
				this.addressInfo.region = e.labelArr[2];
			},
			// switch事件是否为默认地址
			isDefaultAddress(e){
				// console.log(e.target.value);
				this.addressInfo.defaultStatus = e.target.value == true ? 1 : 0;
				// console.log(this.defaultStatus);
				if(this.addressInfo.defaultStatus==1){
					makeAddressDefaul(this.addressInfo.id).then(res=>{
						// console.log(1)
						uni.showToast({
						    title: '切换默认地址成功',
						    icon: 'none',
						});
						
					})
				}
				
			},
			// 更新地址
			updateAddress(){
				updateAddressInfo(this.addressInfo).then(res=>{
					console.log(res);
					if(res.success==true){
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			//删除地址
			delAddress(){
				uni.showModal({
				    title: '删除提示',
				    content: '确认删除此收货地址吗？',
				    success: res=> {
				        if (res.confirm) {
				            delAddressInfo(this.addressInfo.id).then(res=>{
				            	uni.showToast({
				            	    title: '删除成功',
				            	    icon: 'success',
				            		duration:1000,
				            		success() {
				            			setTimeout(function(){
				            				uni.navigateTo({
				            					url:'../address'
				            				})
				            			},1000)
				            		}
				            	});
				            })
				        } else if (res.cancel) {
				            return
				        }
				    }
				});
				
			}
		},
		onLoad(options) {
			// console.log(options.id);
			this.init(options.id);
		}
	}
</script>

<style lang="scss" scoped>
// 保存地址按钮
	.save {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		 .btn {
			 display: flex;
			 box-shadow: 0px 4rpx 10rpx rgba(0,0,0,.4);
			 width: 70%;
			 height: 80rpx;
			 border-radius: 80rpx;
			 background-color: #354e44;
			 color: #fff;
			 justify-content: center;
			 align-items: center;
			 font-size: 30rpx;
		 }
	}
	// 内容
	.content {
		
		 .row {
			 display: flex;
			 flex-wrap: wrap;
			 width: 94%;
			 margin: 0 3%;
			 border-bottom: 1Px solid #ccc;
			  .nominal {
				  display: flex;
				  width: 30%;
				  height: 120rpx;
				  font-weight: 200;
				  font-size: 30rpx;
				  align-items: center;
			  }
			  .ipt {
				  display: flex;
				  width: 70%;
				  padding: 20rpx 0;
				  align-items: center;
				  font-size: 30rpx;
			  }
			  .switch {
				  justify-content: flex-end;
			  }
		 }
		 
	}
	// 删除收货地址
	.del {
		 width: 94%;
		 margin: 0 3%;
		 display: flex;
		 height: 100rpx;
		 justify-content: center;
		 margin-top: 60rpx;
		 align-items: center;
		 font-size: 36rpx;
		 color: #fff;
		 background-color: #e64340;
		 border-bottom: solid 1rpx #eee;
	}
</style>
